<template>
  <div>
    <CustomTable
      :showAlert="false"
      ref="table"
      :columns="columns"
      :loading="loading"
      :dataSource="pageData"
      :showHeader="false"
      :showSelection="false"
      :scroll="{ y: 490 }"
      @change="onTableChange"
    >
      <template slot="name" slot-scope="text, record">
        <a-card bordered class="card card2" v-if="type == '1'">
          <template slot="cover">
            <!-- <img class="zzImg" src="./img/2.png" /> -->
            <p class="tp">{{ record.organizationName }}</p>
            <p class="p1">
              <span class="sp1">组织类型：</span><span class="sp2">{{ record.organizationType_dictText }}</span>
            </p>
            <p class="p1">
              <span class="sp1">组织层级：</span><span class="sp2">{{ record.organizationLevel_dictText }}</span>
            </p>
            <p class="p1">
              <span class="sp1">业务指导部门：</span><span class="sp2">{{ record.businessGuidanceDepartment }}</span>
            </p>
            <p class="p1">
              <span class="sp1">人员数量：</span><span class="sp2">{{ record.numberPersonnel }}</span>
            </p>
            <p class="p1">
              <span class="sp1">主要职能：</span><span class="sp2">{{ record.mainFunctions }}</span>
            </p>
          </template>
        </a-card>
        <a-card bordered class="card card2" v-if="type == '2'">
          <template slot="cover">
            <!-- <img class="zzImg" src="./img/1.png" /> -->
            <p class="tp">{{ record.mechanismName }}</p>
            <p class="p1">
              <span class="sp1">机构类型：</span><span class="sp2">{{ record.mechanismType_dictText }}</span>
            </p>
            <p class="p1">
              <span class="sp1">机构层级：</span><span class="sp2">{{ record.level_dictText }}</span>
            </p>
          </template>
        </a-card>
        <a-card bordered class="card card2" v-if="type == '3'">
          <template slot="cover">
            <p class="tp">{{ record.name }}</p>
            <p class="p1">
              <span class="sp1">综治中心层级：</span><span class="sp2">{{ record.level_dictText }}</span>
            </p>
            <p class="p1">
              <span class="sp1">综治中心联系方式：</span><span class="sp2">{{ record.personChargeContacInformation }}</span>
            </p>
            <p class="p1">
              <span class="sp1">负责人姓名：</span><span class="sp2">{{ record.personChargeName }}</span>
            </p>
          </template>
        </a-card>
      </template>
    </CustomTable>
  </div>
</template>

<script>
import CustomTable from '@/components/zxd/Table/CustomTable'
import * as api from '@/api/xlgc/alarmCenter.js'
export default {
  components: {
    CustomTable
  },

  data() {
    return {
      loading: false,
      columns: [
        {
          title: '',
          dataIndex: 'name',
          align: 'left',
          // width: 130,
          scopedSlots: { customRender: 'name' }
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {},
      type: '1'
    }
  },

  created() {},
  async mounted() {},
  methods: {
    getData(params, type) {
      this.type = type
      this.pageFilter.pageNo = 1
      this.pageFilter = Object.assign(this.pageFilter, params)
      this.refreshTable()
    },
    async refreshTable() {
      this.loading = true
      let res = ''
      if (this.type == '1') {
        res = await api.searchOrganization(this.pageFilter)
      }
      if (this.type == '2') {
        res = await api.searchMechanism(this.pageFilter)
      }
      if (this.type == '3') {
        res = await api.searchCenter(this.pageFilter)
      }
      if (res.success) {
        this.pageData = res.result
        this.loading = false
      }
    },

    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    // 详情
    onDetail(record) {
      this.$router.push({
        path: '/smuggleInformation/detail',
        query: {
          id: record.id
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.card {
  .zzImg {
    width: 70px;
    height: auto;
    position: absolute;
    right: 0;
    top: 0;
  }
  .tp {
    color: #000;
    font-weight: bold;
    .sp {
      position: absolute;
      right: 20px;
    }
  }
  .p1 {
    margin-bottom: 5px;
  }
  .sp1 {
    font-size: 14px;
    color: #666;
  }
  .sp2 {
    // margin-left: 20px;
    font-size: 14px;
    color: #000;
  }
}

/deep/.ant-table-thead > tr > th {
  background-color: #fff;
}
/deep/.ant-table-tbody .ant-table-row td {
  padding-bottom: 0;
}
/deep/.ant-table-tbody > tr > td {
  padding: 0;
}
</style>
